<template>
  <el-tabs>
    <el-tab-pane
      v-for="(item, index) in listData"
      :key="index"
      :label="item.title"
    >
      <el-scrollbar max-height="300px">
        <div
          class="container"
          v-for="(content, i) in item.content"
          :key="i"
          @click="clickItem(content, i)"
        >
          <div class="avatar">
            <el-avatar size="small" :src="content.user?.avatar"></el-avatar>
          </div>
          <div class="content">
            <div>{{ content.user?.nickName }}</div>
            <div class="title" v-html="content.content"></div>
            <div class="time" v-if="content.createdAt">
              {{
              typeof createTime(content.createdAt!) == "number"
                ? createTime(content.createdAt!) + "小时前"
                : createTime(content.createdAt!)
              }}
            </div>
          </div>
        </div>
        <div class="actions">
          <div
            class="a-item"
            :class="{ border: i !== actions.length }"
            v-for="(action, i) in actions"
            :key="i"
            @click="clickAction(action, i)"
          >
            <div class="a-icon" v-if="action.icon">
              <i :class="`iconfont ${action.icon}`"></i>
            </div>
            <div class="a-text">{{ action.text }}</div>
          </div>
        </div>
      </el-scrollbar>
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import { onMounted, PropType, ref } from "vue";
import { ListOptions, ActionOptions, ListItem, atType } from "./type";
import usePrevenDefault from "../../hooks/usePrevenDefault";
import { createTime } from "../../utils/tools";
import { atMeBlogItem, atMeReplyItem } from "../../store/types";
usePrevenDefault("replyAitem", "noRouter");
const props = defineProps({
  listData: {
    type: Array as PropType<atType[]>,
    required: true,
  },
  // 操作的内容
  actions: {
    type: Array as PropType<ActionOptions[]>,
    default: () => [],
  },
});
const emits = defineEmits(["clickItem", "clickAction"]);
const clickAction = (item: ActionOptions, index: number) => {
  emits("clickAction", { item, index });
};
const clickItem = (item: atMeReplyItem | atMeBlogItem, index: number) => {
  emits("clickItem", { item, index });
};
let activeName = ref("first");
</script>
<style lang="less" scoped>
:deep(.el-tabs__nav) {
  width: 100%;
  display: flex;
  .el-tabs__item {
    flex: 1;
    text-align: center;
  }
}

.container {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  cursor: pointer;
  &:hover {
    background-color: #e6f6ff;
  }

  .content {
    flex: 3;
    padding: 0.625rem;
    .title {
      display: flex;
      align-items: center;
      font-size: 14px;
      :deep(.aitem),
      :deep(.replyAitem) {
        color: #ff8200;
      }
    }
    .time {
      font-size: 12px;
      color: #999;
      margin-top: 4px;
    }
  }
}

.actions {
  height: 50px;
  display: flex;
  align-items: center;
  border-top: 1px solid #eee;
  background-color: #fff;
  position: sticky;
  left: 0;
  bottom: 0;

  width: 100%;
  .a-item {
    height: 50px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    .a-icon {
      margin-right: 4px;
      position: relative;
      top: 2px;
      display: flex;
      align-items: center;
    }
    .a-text {
      font-size: 12px;
      transform: translateY(3px);
    }
    &:first-child {
      border-right: 1px solid #eeeeee;
    }
    &:hover {
      color: #ff5900;
    }
  }
}
</style>
